<template>
    <div>
        <el-container>
            <el-header>
                <div style=" width: 100%;height: 100%;display: flex;justify-content: space-between;background-color: #304156">
                    <span class="guanli">博客后台管理</span>


                    <div style="display: flex;justify-content: space-around;align-items: center">
                        <div style="border: 0;margin-right: 5px">
                            <el-image
                                    style="width: 40px; height: 40px;border-radius: 20px;margin-right: 10px"
                                    :src="user.avatar"
                                    :preview-src-list="[user.avatar]"
                                    :fit="cover"></el-image>
                        </div>
                        <el-dropdown style="border: 0" @command="handleCommand">
  <span class="el-dropdown-link" style="color:#95B6CF">
    <span style="color:#95B6CF">{{user.nickname}}</span><i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">返回首页</el-dropdown-item>
                                <el-dropdown-item command="b">退出</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="205px" style="height: calc(100vh - 60px);margin-top: 0;border-top: 0">
                    <el-row style="height: 100%" class="tac">
                        <el-col style="height: 100%">
                            <el-menu
                                    background-color="#304156"
                                    :router="true"
                                    :collapse-transition="true"
                                    text-color="#95B6CF"
                                    style="height: 100%"
                                    default-active="adminindex"
                                    class="el-menu-vertical-demo"
                            >
                                <el-submenu index="1"

                                >
                                    <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <!--                                        el-icon-light-rain-->
                                        <!--                                        <template slot="title">分组一</template>-->
                                        <el-menu-item index="admintype">
                                            <template slot="title">
                                                <i class="el-icon-light-rain"></i>
                                                <span>分类管理</span>
                                            </template>

                                        </el-menu-item>
                                        <el-menu-item index="adminuser">
                                            <template slot="title">
                                                <i class="el-icon-user"></i>
                                                <span>用户管理</span>
                                            </template>


                                        </el-menu-item>
                                        <el-menu-item index="adminblog">
                                            <template slot="title">
                                                <i class="el-icon-light-rain"></i>
                                                <span>博客管理</span>
                                            </template>
                                        </el-menu-item>
                                        <el-menu-item index="admintag">
                                            <template slot="title">
                                                <i class="el-icon-collection-tag"></i>
                                                <span>标签管理</span>
                                            </template>
                                        </el-menu-item>
                                        <el-menu-item index="admincustom">
                                            <template slot="title">
                                                <i class="el-icon-s-flag"></i>
                                                <span>自定义管理</span>
                                            </template>
                                        </el-menu-item>
                                        <el-menu-item index="adminswiper">
                                            <template slot="title">
                                                <i class="el-icon-loading"></i>
                                                <span>轮播图管理</span>
                                            </template>
                                        </el-menu-item>
                                        <el-menu-item index="adminlink">
                                            <template slot="title">
                                                <i class="el-icon-link"></i>
                                                <span>友链管理</span>
                                            </template>
                                        </el-menu-item>
                                        <el-menu-item index="admincomment">
                                            <template slot="title">
                                                <i class="el-icon-reading"></i>
                                                <span>评论管理</span>
                                            </template>
                                        </el-menu-item>
                                    </el-menu-item-group>


                                </el-submenu>
                                <el-menu-item index="welcome">欢迎</el-menu-item>
                                <el-menu-item index="adminindex">首页</el-menu-item>


                            </el-menu>
                        </el-col>
                        <!--                       1-->
                    </el-row>
                </el-aside>
                <el-main >
                    <i style="width: 15px;height: 20px;" @click="change" class="el-icon-s-fold"></i>
                    <!--                    进行动态的展示-->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<style lang="less">
    .el-header {
        /*border-bottom: 1px solid #304156!important;*/
        padding: 0!important; ;
        margin-bottom: 0!important;
        margin: 0;
        div {
            border-bottom: 1px solid #CDCDCD;

            .guanli {
                line-height: 55px;
                margin-left: 10px;
                /*color: #4093FF;*/
                color: #95B6CF;
                font-weight: bold;
                font-size: 18px;
            }


        }
    }

    .el-aside {
        /*box-sizing: border-box !important;*/
        border-top: 1px solid #CDCDCD;
    }

</style>

<script>
    import jwtDecode from "jwt-decode";
    // import Global from "../../assets/js/Global";
    import Global from "../../../public/static/Global";

    export default {
        data() {
            return {
                user: {},
                isCollapse: false  // 导航菜单是否拦截
            }
        },
        created() {
            this.getUserInfo();
        },
        methods: {
            change() {  // 折叠
                this.isCollapse = !this.isCollapse;
            }
            ,
            handleCommand(command) {
                if (command === 'a') {
                    this.$router.push('/index')
                } else if (command === 'b') {
                    localStorage.removeItem('token')
                    this.$router.push('/index')
                }
            },
            getUserInfo() {
                const token = localStorage.getItem('token')
                const obj = jwtDecode(token)
                this.user = obj;
                this.user.avatar = Global.baseUrl + this.user.avatar


            }
        }
    }
</script>